<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Midpoint displacement algorithm</title>
        <script type="text/javascript">
			//Add a listener for load event to window. The purpose is to execute JavaScript code only when the page is fully loaded (so the canvas element is accessible).
			window.addEventListener("load", app, false); 
			
			function app() { //all javascript code goes within this function
				var points=new Array(); //the array where Y coordinates are stored
				/* PARAMETERS */
				noS=40; //set the number of final segments
				points[0]=240; //Y coordinate of the starting point: could be any random number between 0 and 480
				points[noS]=240; //Y coordinate of the ending point: could be any random number between 0 and 480
				mD=200; //the maximum displacement of Y coordinate
				reduction=0.4; //the amount to which mD is reduced at each iteration (it should be between 0 and 1)
				
				/* MIDPOINT DISPLACEMENT FUNCTION */
				function midpoint(start, end, mD, reduction) {
					/* here goes the code for the algorithm (10 lines of code are more than enough):
					- calculate the mean Y coordinate between starting and ending point
					- displace the Y coordinate by a random value less than mD. (See Math.random() for generating random numbers and Math.round() to round numbers)
					- store the Y coordinate you randomly displaced, in the array position halfway between starting and ending point.
					- reduce mD by reduction
					- call midpoint function recursively on the two new segments you obtained (start/midpoint and midpoint/end)
					*/
				}
			   
				/* CANVAS */
				function drawTerrain() {
					var theCanvas = document.getElementById("canvasOne"); //reference to canvas element
					var context = theCanvas.getContext("2d"); //get the reference to canvas context
					context.beginPath(); //begin the path
					x=0; y=480
					context.moveTo(x,y); //move the "pencil" to the left-bottom corner of the canvas
					context.lineTo(0, points[0]); //draw a line from the previous position of the "pencil" to the position defined in the arguments (in this case to the Y coordinate )
					
					/* here goes some code (10 lines of code are more than enough):
					- loop through the array values you generate before
					- for each value calculate the implicit X coordinate (according to the number of segments)
					- move the pencil to the new X,Y coordinates */
					
					
					context.closePath(); //close the path
					context.fillStyle = "#ff0000"; //define fill color
					context.fill(); //fill the path with the color specified
					
				}
			
				midpoint(0, noS, mD, reduction); //call to midpoint displacement function
				drawTerrain(); //call to draw terrain function
				
			}
	
		</script>
    </head>
    
    <body>
        <div>
            <canvas id="canvasOne" width="640" height="480" style="border: 1px solid black">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>
​